<!DOCTYPE html>
<html>

<head>

    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">

    <title>game1-斗地主</title>

    {include file="common/meta_config" /}
<body id="page-top">
<style>
    .talk_name{
        color:blue;
    }
    .system_message{
        color:red;
    }
    .nickname{
        position:absolute;
        color:#0a6aa1;
        display:block;
        width: 100%;
    }
    #user1_name{
        bottom:0px;
        left:110px;
    }
    #user2_name{
        bottom:0px;
        left:-55px;
    }
    #user3_name{
        bottom:-25px;
        left:0px;
    }
    .ready{
        position:absolute;
        color:red;
        width: 100%;
    }
	.ready_text{
		display:none;
	}
    #user1_ready{
        bottom:175px;
        left:-55px;
    }
    #user2_ready{
        bottom:175px;
        left:110px;
    }
    #user3_ready{
        bottom:150px;
        left:225px;
    }
</style>

<div id="main_game" style="border:1px solid black;width:1200px;height:600px;position: relative;">

    <div id="hand_joker1" style="border:1px solid black;width:100px;height:350px;position:absolute;bottom:200px;right:150px">
        <div class="nickname" id="user1_name"></div>
        <div class="ready" id="user1_ready"><div class="ready_text" id="ready_text1">已准备</div></div>
    </div>
    <div id="hand_joker2" style="border:1px solid black;width:100px;height:350px;position:absolute;bottom:200px;left:150px">
        <div class="nickname" id="user2_name"></div>
        <div class="ready" id="user2_ready"><div class="ready_text" id="ready_text2">已准备</div></div>
    </div>
    <div id="hand_joker3" style="border:1px solid black;width:500px;height:120px;position:absolute;bottom:50px;right:350px">
        <div class="nickname" id="user3_name"></div>
        <div class="ready" id="user3_ready"><div class="ready_text" id="ready_text3">已准备</div><button id="my_ready_button">准备</button></div>
    </div>

    <div id="talk" style="border-top:1px solid black;border-left:1px solid black;width:200px;height:150px;position:absolute;bottom:0px;right:0px;overflow: auto">

    </div>
</div>

<script src="__CDN__/assets/js/jquery.min.js"></script>
<script>
    $(function(){
        var user_id = "{$user.id}";
        var username = "{$user.nickname}";
        //连接socket
        var ws = new WebSocket("ws://{$swoole_url}");
		var is_ready = false;
        ws.onopen = function(evt) {
            var start_data = '{"game":"landlord","action":"connect","data":{"user_id":'+user_id+',"username":"'+username+'"}}';
            ws.send(start_data);
        };

        ws.onmessage = function(evt) {
            var data = evt.data;
            data = JSON.parse(data);
            if(data.code != 200){
                alert(data.message);
                return;
            }
            switch (data.type) {
                case 'enter_room':
                    //进入房间  发送消息，更新座位信息
                    sendmsg(data.message,"",2);
                    //更新座位信息
                    createPersonList(data.data,user_id);
                    break;
				case 'user_ready':
					createPersonList(data.data,user_id);
                    break;
                case 'game_start':
                    createJoker(data.data,3);
                    break;

            }
        };

		//准备
		$("#my_ready_button").click(function(){
			if(is_ready){
				alert("您已经准备了！");
			}
			ready();
		})


        function createJoker(data,sort){
		    console.log(data);
        }

        function sendmsg(msg,username,type){
            if(type == 1){
                var span = $("<div class='talk_div'><span class='talk_name'>"+username+"：</span><span class='talk_msg'>"+msg+"</span></div>");
            }else if(type == 2){
                var span = $("<div class='talk_div'><span class='system_message'>系统消息："+msg+"</span></div>");
            }else{
                return false;
            }
            $("#talk").append(span);

            var div = document.getElementById('talk');
            div.scrollTop = div.scrollHeight
        }

        function createPersonList(data,user_id){
            var my_sort = 0;
            $(".nickname").html();
            //$(".ready_text").hide();
            var person = [];
            //获取自己的信息
            $.each(data,function(e,i){
                if(i.user_id == user_id){
                    my_sort = i.sort;
                    //写自己的名字
                    createPerson(i.username,i.isready,3);
                }else{
                    if(i.sort !== undefined && i.sort>0){
                        person[i.sort] = i;
                    }
                }
            })
            $.each(person,function(e,i){
				if(i && i.sort !== undefined && i.sort>0){
					var sort = i.sort - my_sort;
					if(sort<0){
						sort = sort+3;
					}
					createPerson(i.username,i.isready,sort);
				}
            })
            //写其他的信息
        }

        function createPerson(name,ready,sort){
            $("#user"+sort+"_name").html(name);
            if(ready>0){
				if(sort == 3){
					is_ready = true;
					$("#my_ready_button").hide();
				}
                $("#ready_text"+sort).show();
            }else{
				if(sort == 3){
					$("#my_ready_button").show();
				}
                $("#ready_text"+sort).hide();
            }
        }

		function ready(){
			var ready_data = '{"game":"landlord","action":"ready","data":{"user_id":'+user_id+'}}';
            ws.send(ready_data);
		}

    })


</script>



</body>
</html>
